import '@ant-design/compatible/assets/index.css';
import { Button, Row, Col, Tabs, message } from 'antd';
import React, { useState, useEffect } from 'react';
import router from 'umi/router';
import { API_URL } from '@/config/api'
import { useActivate } from 'react-activation';
import { useRequest } from '@umijs/hooks';
import styles from './index.less';
import printJS from 'print-js';


const ReportPrint = () => {

  // 遗失物品基础信息
  const stateStr = sessionStorage.getItem('/lostItemManage/reportPrint');
  const stateObj = stateStr ? JSON.parse(stateStr) : {};

  return (
    <div className={styles.reportPrint}>
      <Row>
        <Col span={21}>
          <p>遗失/{stateObj.type === 'claim' ? '认领图片打印' : '沟通记录打印'}</p>
        </Col>
        <Col span={3}>
          <Button type='primary' onClick={() => {
              // window.document.body.innerHTML = window.document.getElementById('test').innerHTML;
              // window.print();
              // window.location.reload();
              printJS({
                printable: 'test',
                type: 'html',
                maxWidth: '1920',
                scanStyles: false,
                style: '#test{width: 100%; height: auto; overflow: hidden;}.imgPrint{width: 100%; height: auto; display: inline-block;}',
                // targetStyles: ['*'],
                onPrintDialogClose: (val) => {
                  console.log(val, 'onPrintDialogClose')
                }
              });
          }}>打印</Button>
        </Col>
      </Row>
      <div id="test">
        <img src={`data:image/png;base64,${stateObj.url}`} alt="" className={`imgPrint ${styles.reportImg}`} />
      </div>
    </div>
  );
};

export default ReportPrint;
